<template>
  <div class="sku">
    <!-- 遮罩层 -->
    <div class="mask" @click="closeSku"></div>
    <div class="sku-container">
      <div class="sku-header">
        <!-- sku缩略图 -->
        <div class="sku-thumb-img">
          <van-image :src="datas.pictureComperssPath" />
        </div>
        <!-- 标题 -->
        <div class="sku-title">
          <p class="sku-title-price">{{datas.presentPrice | toFixed | rmb}}</p>

          <p class="sku-title-stocknum">剩余:{{datas.amount}}</p>

          <!-- 步进器 -->
          <van-stepper integer v-model="num" />
        </div>
        <van-icon class="close" name="cross" @click="closeSku" />
      </div>
      <div class="sku-body">
        <div class="sku-size sku-item">
          <div class="sku-item-title">尺寸：</div>
          <ul>
            <li
              v-for="(item,idx) of datas.type"
              :key="item.id"
              @click="selectSku(item,idx)"
              :class="current=== idx ?'sku-active':null"
            >{{item.name}}</li>
          </ul>
        </div>
        <div class="button-list">
          <van-button
            class="van-button van-button--danger van-button--large"
            @click="addShopcar"
          >加入购物车</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    datas: {
      type: Object,
      required: true,
      default: new Object()
    }
  },
  data() {
    return {
      skuOptions: {},
      current: 0, //默认选中的规格
      num: 1 //商品数量
    };
  },
  watch: {
    skuOptions: {
      //监听skuOptions
      handler(newVal) {
        if (newVal) {
          this.datas.skuComb.forEach(item => {
            if (item.s1 === newVal.id) {
              this.datas.presentPrice = item.price; //获取sku对应的价钱
              this.datas.amount = item.stock_num; //获取sku对应的库存
              this.datas.selectType = newVal.name; //获取sku对应的规格名字
              this.datas.num = this.num; //获取商品的数量
            }
          });
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    closeSku() {
      //关闭弹窗
      this.$emit("closeSku");
    },

    selectSku(item, idx) {
      this.skuOptions = item; //datas.type赋予skuOptions
      this.current = idx; //选中规格添加格式
    },
    addShopcar() {
      //添加购物车

      let goodsItem = {
        id: this.datas.id, //获取商品id
        name: this.datas.name, //获取商品名称
        img: this.datas.pictureComperssPath, //获取商品图片
        sku: this.datas.selectType, //获取商品规格
        price: this.datas.presentPrice, //获取商品价格
        num: this.num, //获取商品数量
        isChecked: true //是否勾选
      };
      // console.log(goodsItem);

      let goodsList = JSON.parse(localStorage.getItem("goodsList")); //localStorage中获取数据

      if (goodsList === null) {
        //如果goodsList为空
        let arr = [];
        arr.push(goodsItem); //判断结果后将对象goodsItem放进数组arr
        localStorage.setItem("goodsList", JSON.stringify(arr));
      } else if (goodsList && goodsList.length === 0) {
        //goodsList有值，但值为[]
        let arr = [];
        arr.push(goodsItem);
        localStorage.setItem("goodsList", JSON.stringify(arr));
      } else {
        let arr = [];

        let bool = false;
        goodsList.forEach(item => {
          if (item.id === goodsItem.id && item.sku === goodsItem.sku) {
            //同个商品(id和规格sku一样)
            item.num += goodsItem.num; //同个规格商品数量num叠加
            bool = true;
          } else {
            arr.push(item);
          }
        });
        arr.push(goodsItem);
        if (bool) {
          localStorage.setItem("goodsList", JSON.stringify(goodsList)); //同个商品
        } else {
          localStorage.setItem("goodsList", JSON.stringify(arr));
        }
      }

      // let list = JSON.parse(localStorage.getItem("goodsList"));//点击加入购物车，获取加入购物车的商品数据
      // this.$eventBus.$emit("getGoodsList", list);//将加入购物车的商品数据传给toShopcar.vue
      this.$toast.success("成功加入购物车");
      this.closeSku(); //关闭sku弹窗
    }
  },

  created() {
    if (this.datas) {
      this.skuOptions = this.datas.type[0];
    }
  }
};
</script>

<style>
</style>